<template>
    <div id="userAdmin">
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="用户名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="userCode"
                    label="用户编码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别">
                <template slot-scope="scope">
                    <span>{{scope.row.sex==0?'保密':
                        scope.row.sex==1?'男':
                        scope.row.sex==2?'女':''}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="birthday"
                    label="出生日期"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="注册时间"
                    width="300">
                <template slot-scope="scope">
                    <span>{{scope.row.createTime|timestampToTime}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="disableSend"
                    label="禁言状态">
                <template slot-scope="scope">
                    <span>{{scope.row.disableSend==0?'正常':'禁言'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="账号状态">
                <template slot-scope="scope">
                    <span>{{scope.row.status==0?'正常':
                        scope.row.status==1?'注销':
                        scope.row.status==2?'锁定':
                        scope.row.status==3?'封号':'未知'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    align="right"
                    width="300">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="params.queryCondition"
                            size="mini"
                            placeholder="输入关键字搜索"
                            clearable>
                        <el-button slot="append" icon="el-icon-search" @click="getData"></el-button>
                    </el-input>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(1, scope.row)">禁言/解禁</el-button>
                    <el-button
                            size="mini"
                            @click="handleEdit(2, scope.row)">封号/解封</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleEdit(3, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination v-bind:child-msg="pageparm" @callFather="pageCallFather"></Pagination>
    </div>
</template>

<script>
    import Pagination from "@/components/Pagination";
    import {selectUserByCondition, updateUserById} from "@/api/adminFun";
    import {Loading, Message, MessageBox} from 'element-ui';
    import {timestampToTime} from "@/utils/util";

    export default {
        name: "userAdmin",
        components:{
            Pagination
        },
        data(){
            return{
                tableData: [],

                search: '',

                params: {
                    pageIndex: 0,
                    pageSize: 10,
                    queryCondition: ''
                },

                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                }
            }
        },
        created(){
          this.getData();
        },
        methods: {
            getData(){
                selectUserByCondition(this.params).then(res=>{
                    if (res.status == 200){
                        this.tableData = res.data.data;
                        this.pageparm.total = res.data.totalCount;
                    }else {
                        Message.error(res.message);
                    }
                })
            },

            handleEdit(type, row) {
                let params = {
                    id: row.id
                }
                if (type == 1) {
                    if (row.disableSend == 0) {
                        MessageBox.prompt('请输入要禁言的时间（分钟）', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputPattern: /^\+?[1-9][0-9]*$/,
                            inputErrorMessage: '输入格式不正确'
                        }).then(value => {
                            var date = new Date();
                            var newDate = timestampToTime(date.getTime() + value.value * 60 * 1000);
                            params.relieveTime = newDate;
                            params.disableSend = 1;
                            updateUserById(params).then(res=>{
                                if (res.status == 200) {
                                    Message.success(res.message);
                                    this.getData();
                                }else {
                                    Message.error(res.message);
                                }
                            })
                        })
                    }else {
                        params.disableSend = 0;
                        updateUserById(params).then(res=>{
                            if (res.status == 200) {
                                Message.success(res.message);
                                this.getData();
                            }else {
                                Message.error(res.message);
                            }
                        })
                    }
                }else if (type == 2){
                    if (row.status == 0) {
                        MessageBox.prompt('请输入要封停的时间（分钟）', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputPattern: /^\+?[1-9][0-9]*$/,
                            inputErrorMessage: '输入格式不正确'
                        }).then(value => {
                            var date = new Date();
                            var newDate = timestampToTime(date.getTime() + value.value * 60 * 1000);
                            params.relieveTime = newDate;
                            params.status = 3;
                            updateUserById(params).then(res=>{
                                if (res.status == 200) {
                                    Message.success(res.message);
                                    this.getData();
                                }else {
                                    Message.error(res.message);
                                }
                            })
                        })
                    }else if (row.status == 2 || row.status == 3) {
                        params.status = 0;
                        updateUserById(params).then(res=>{
                            if (res.status == 200) {
                                Message.success(res.message);
                                this.getData();
                            }else {
                                Message.error(res.message);
                            }
                        })
                    }
                }else {
                    MessageBox.confirm('该操作将永久删除该用户，是否继续？', '删除用户', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        params.dr = 1;
                        updateUserById(params).then(res=>{
                            if (res.status == 200) {
                                Message.success(res.message);
                                this.getData();
                            }else {
                                Message.error(res.message);
                            }
                        })
                    })
                }
            },

            // 分页插件事件
            pageCallFather(param) {
                this.params.pageIndex = param.currentPage - 1;
                this.params.pageSize = param.pageSize;
                this.getData();
            },
        }
    }
</script>

<style>
    #userAdmin .el-table td{
        border-bottom: none;
    }
    #userAdmin .el-table th, .el-table tr{
        background-color: #272727;
    }
    #userAdmin .el-tabs__item{
        color: white;
    }
    #userAdmin .el-tabs__item.is-active {
        color: #f3cd20;
    }
    #userAdmin .el-tabs__active-bar {
        background-color: #f3cd20;
    }
    #userAdmin .el-table th, .el-table .el-table__row {
        color: white;
        background: rgb(48, 49, 51);
    }
    #userAdmin .el-table th, .el-table .el-table__row:hover {
        color: #67C23A;
    }
    #userAdmin .el-table, .el-table__expanded-cell{
        background: rgb(48, 49, 51);
    }

    #userAdmin .el-table th, .el-table .el-table__row:hover{
        color: #f3cd20;
    }
</style>
